import React, { Component } from 'react'
import Swiper from 'swiper'
import { EyeFill } from 'antd-mobile-icons'
import './index.scss'
import '../../../assets/css/b.css'


export default class HomeGuessLike extends Component {
  render() {
    return (
      <div className='sh_d'>
        <div className="sh_dt">
          <strong>猜你喜欢</strong>
        </div>
        <div className="swiper mySwiper">
          <div className="swiper-wrapper">
            {
              this.props.guessList.map((item) => (
                <div className="swiper-slide" key={item.id} onClick={() => this.goDeatil(item.id)}>
                  <div className="good-img">
                    <img src={item.pic} alt={item.name} />
                    <p className="activity"><EyeFill /> 热度:{item.views} </p>
                  </div>
                  <p className="good-price">￥{item.minPrice}</p>
                  <p className="good-oldprice">￥{item.minPrice*10}</p>
                </div>
              ))
            }
          </div>
        </div>
        <div className="swiper-pagination"></div>
      </div>
    )
  }
  componentDidMount() {
    new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  }
  // 去详情页。给父组件传递id
  goDeatil = (value) => {
    this.props.goDetail(value)
  }
}
